import React, { Component, Fragment } from 'react';
import { Col, Row, Checkbox, Switch, Collapse, Type, Icon } from 'antd';
import globalStyles from '../../style/common.less';

const customPanelStyle = {
  marginBottom: 8,
  // background: '#fff',
  overflow: 'hidden',
  border: '1px solid rgb(238,238,238,0.5)',
  color: '#fff',
  backgroundColor: 'rgba(0,0,0,0)',
};

const customListStyle = {
  marginTop: 10,
  color: '#fff',
  backgroundColor: 'rgba(0,0,0,0)',
};

const Panel = Collapse.Panel;
class DataPanel extends Component {
  handleChange = e => {
    const { onSelectData } = this.props;
    if (onSelectData) {
      onSelectData(e.target.itemId, e.target.checked, e.target.parentTag, e.target.tag);
    }
  };

  handleOpenTable = value => {
    const { onOpenTable } = this.props;
    if (onOpenTable) {
      onOpenTable(value);
    }
  };

  handleOpenChart = value => {
    const { onOpenChart } = this.props;
    if (onOpenChart) {
      onOpenChart(value);
    }
  };

  handleOpenDataInfoPanel = value => {
    const { onOpenDataInfoPanel } = this.props;
    if (onOpenDataInfoPanel) {
      onOpenDataInfoPanel(value);
    }
  };

  render() {
    const { data } = this.props;
    return (
      <div style={{ padding: '8px 16px 8px 8px' }}>
        <Collapse
          style={{ color: '#fff', backgroundColor: 'rgba(0,0,0,0)' }}
          bordered={false}
          expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} />}
        >
          {data.map((item, index) => {
            return (
              <Panel
                // header={item.title + ` （${item.children.length}）`}
                header={item.title}

                key={index}
                style={customPanelStyle}
              >
                {item.children.map((subitem, index) => {
                    return (
                      <div key={index} style={customListStyle}>
                        <Checkbox
                          parentTag={item}
                          tag={subitem}
                          itemId={subitem.id}
                          value={subitem.title}
                          onChange={this.handleChange}
                          checked={subitem.selected}
                          onMouseEnter={this.handleMouseEnter}
                          onMouseLeave={this.handleMouseLeave}
                        >
                          <span>{subitem.title}</span>
                        </Checkbox>
                        {/* {subitem.selected &&
                    <Fragment>
                    {subitem.hasLegend && <div>图例</div>}
                  </Fragment>
                   } */}
                      </div>
                    );

                })}
              </Panel>
            );
          })}
        </Collapse>
      </div>
    );
  }
}

export default DataPanel;
